<!-- css:filter用法 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>filter用法</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style/index.css">
</head>

<body>
    <div class="filter_box">
        <img src="./image/a1.jpg" class="p1">
        <img src="./image/表情.png" class="p2">
    </div>
</body>
<script>
    // 指定哀悼日，页面变灰
    if (aidaori()) {
        // document.querySelector('html').classList.add('gray');通过添加class设置样式；
        $("html").css({
            "filter": "gray !important",
            "filter": "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)",
            "filter": "grayscale(100%)",
            "-webkit-filter": "grayscale(100%)",
            "-moz-filter": "grayscale(100%)",
            "-ms-filter": "grayscale(100%)",
            "-o-filter": "grayscale(100%)"
        });
    }

    function aidaori() {
        // 指定页面变灰的日子，"月-日"
        var aidaoriarr = new Array("0403", "0404", "0405", "0406", "0414", "0512", "0807", "0909", "1213", );
        var mydate = new Date();
        var str = "";
        var mm = mydate.getMonth() + 1;
        if (mydate.getMonth() > 9) {
            str += mm;
        } else {
            str += "0" + mm;
        }
        if (mydate.getDate() > 9) {
            str += mydate.getDate();
        } else {
            str += "0" + mydate.getDate();
        }
        if (aidaoriarr.indexOf(str) > -1) {
            return 1;
        } else {
            return 0;
        }
    }
</script>

</html>